import { useState } from 'react';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './index.scss';
import logo from '@/assets/react.svg';
export default function Login() {
  const [visiblePassword, setVisiblePassword] = useState(false);
  const loginForm = Form.useForm();

  const onFinish = (values: LoginState) => {
    console.log(values);
  };
  return (
    <section className="login-container">
      <section className="login-form-container">
        <section className="title">
          <img className="logo" src={logo} alt="" />

          <section className="text">
            <span>欢迎登录</span>
          </section>
        </section>
        <section className="form">
          <Form initialValues={loginForm} onFinish={onFinish}>
            <Form.Item name="username">
              <Input
                prefix={<UserOutlined />}
                placeholder="请输入用户名"
              ></Input>
            </Form.Item>
            <Form.Item name="password">
              <Input.Password
                placeholder="请输入密码"
                prefix={<LockOutlined />}
                visibilityToggle={{
                  visible: visiblePassword,
                  onVisibleChange: () => {
                    setVisiblePassword(!visiblePassword);
                  },
                }}
              ></Input.Password>
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit" type="primary" size="large">
                登录
              </Button>
            </Form.Item>
          </Form>
        </section>
      </section>
    </section>
  );
}
